<template>
  <div class="box_1">
    <bigscreen-header headerName="牲畜基本信息" />

    <div class="w_full h_full-70 flex_row_between">
      <!-- 1 -->
      <div class="w_32_p h_full flex_column_between">
        <div class="w_full h_32_p border_radius_10 chart_box_bgi">
          <div class="chart_title l_30 lh_30 text_center"><span>基本信息</span></div>
          <div class="info_box color_fff">
            <div class="info_item w_full mb_10 ml_30 mt_10">
              <div>耳标号: i3u42cvdfsjffjsk3294823</div>
              <div></div>
            </div>
            <div class="info_item w_full mb_10 ml_30 mt_10">
              <div>品种: 西门塔尔牛</div>
              <div>毛色：红白花</div>
            </div>

            <div class="info_item w_full mb_10 ml_30 mt_10">
              <div>出生日期: 2021-03-15</div>
              <div>月龄: 32月</div>
            </div>
            
            <div class="info_item w_full mb_10 ml_30 mt_10">
              <div>是否有角: 否</div>
              <div>免疫疫苗: 口蹄疫，疯牛疫</div>
            </div>
            
            <div class="info_item w_full mb_10 ml_30 mt_10">
              <div>育种次数: 2 </div>
              <div>防疫次数：2</div>
            </div>
          </div>
        </div>

        <div class="w_full h_32_p border_radius_10 chart_box_bgi">
          <div class="chart_title l_30 lh_30 text_center"><span>饲料配方</span></div>
          <div class="info_box color_fff ph_10">
            <div class="w_full flex_row_around mt_10"> 
              <div class="flex_1 main_color text_left">浓缩</div>
              <div class="flex_1 text_center">当天费用： ￥1.40</div>
              <div class="flex_1 text_center">周期费用： ￥58.40</div>
            </div>

            <div class="w_full flex_row_around mt_10"> 
              <div class="flex_1 main_color text_left">豆饼</div>
              <div class="flex_1 text_center">当天费用： ￥1.90</div>
              <div class="flex_1 text_center">周期费用： ￥42.40</div>
            </div>
          </div>
        </div>

        <div class="w_full h_32_p border_radius_10 chart_box_bgi">
          <div class="chart_title l_30 lh_30 text_center"><span>育种信息</span></div>
          <el-carousel class="swiper color_fff" direction="vertical" :autoplay="true">
            <el-carousel-item class="yu_zhong_item">
              <div class="img_box w_30_p">
                <img class="full" src="../../../../assets/images/ba-lin-you-qi/xiao-niu.png" alt="">
              </div>
              <div class="w_70_p ph_10">
                <div class="mb_10">
                  育种编号：1000111 
                  <span class="ml_30 cursor" @click="goToYuZhongYuanPage()">育种员：那申</span>
                </div> 
                <div class="mb_10">育种日期：2021.1.13 <span class="ml_30"></span></div> 
                <div class="mb_10">出生日期：2021.9.15</div> 
                <div class="mb_10">牛犊性别：公</div> 
                <div class="mb_10">牛犊体重：40kg</div> 
                <div class="mb_10">健康状况：<span class="color_green">良好</span> </div> 
              </div>
            </el-carousel-item>
            <el-carousel-item class="yu_zhong_item">
              <div class="img_box w_30_p">
                <img class="full" src="../../../../assets/images/ba-lin-you-qi/xiao-niu2.png" alt="">
              </div>
              <div class="w_70_p ph_10">
                <div class="mb_10">
                  育种编号：1000221 
                  <span class="ml_30 cursor" @click="goToYuZhongYuanPage()">育种员：乌力吉</span>
                </div> 
                <div class="mb_10">育种日期：2021.12.7 <span class="ml_30"></span></div> 
                <div class="mb_10">出生日期：2022.8.10</div> 
                <div class="mb_10">牛犊性别：母</div> 
                <div class="mb_10">牛犊体重：45kg</div> 
                <div class="mb_10">健康状况：<span class="color_green">良好</span> </div> 
              </div>
            </el-carousel-item>
            <el-carousel-item class="yu_zhong_item">
              <div class="img_box w_30_p">
                <img class="full" src="../../../../assets/images/ba-lin-you-qi/xiao-niu-def.svg" alt="">
              </div>
              <div class="w_70_p ph_10">
                <div class="mb_10">
                  育种编号：1000331 
                  <span class="ml_30 cursor" @click="goToYuZhongYuanPage()">育种员：巴图</span>
                </div> 
                <div class="mb_10">育种日期：2023.4.7 <span class="ml_30"></span></div> 
                <div class="mb_10">预产日期：2024.1.7</div> 
                <div class="mb_10">牛犊性别：待定</div> 
                <div class="mb_10">牛犊体重：待定</div> 
                <div class="mb_10">健康状况：<span class="color_orange">待定</span> </div> 
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div> 

      <!-- 2 -->
      <div class="w_32_p h_full flex_column_around">
        <div class="full">
          <div class="full">
            <div class="full flex_column_around">
              <img class="border_radius_10 response_img fit_contain" :src="sessionOxImg" alt="">
            </div>
          </div>
        </div>
      </div> 

      <!-- 3 -->
      <div class="w_32_p h_full flex_column_between">
        <!-- 成长记录 -->
        <div class="w_full h_32_p border_radius_10 chart_box_bgi">
          <div class="chart_title l_30 lh_30 text_center"><span>成长记录</span></div>

          <div class="w_full-30 flex_row_around color_fff" ref="tabName">
            <div 
              class="grow_name cursor" 
              :class="{'main_color': growIndex == index}"
              v-for="(item, index) in chengZhangJiLu" :key="index" 
              @click="changeGrowIndex(index)"
              @mousewheel="wheelScroll"
            >
              {{ item.name }}
            </div>
          </div>

          <div class="w_full-30 color_fff">
            <div class="info_item w_full mb_10 ml_30 mt_10">
              <div>身高: {{ chengZhangJiLu[growIndex].shenGao }}</div>
              <div>体重: {{ chengZhangJiLu[growIndex].weight }}</div>
            </div>
            <div class="info_item w_full mb_10 ml_30 mt_10">
              <div>十字部高: {{ chengZhangJiLu[growIndex].shiZiBu }}</div> 
              <div>体斜长: {{ chengZhangJiLu[growIndex].tiXieChang }}</div> 
              
            </div>
            <div class="info_item w_full mb_10 ml_30 mt_10">
              <div>胸围: {{ chengZhangJiLu[growIndex].xiongWei }}</div>
              <div>腹围: {{ chengZhangJiLu[growIndex].fuWei }}</div> 
            </div>
            <div class="mb_10 ml_30 mt_10">测量日期: {{ chengZhangJiLu[growIndex].date }}</div>
          </div>
        </div>

        <!-- 防疫信息 -->
        <div class="w_full h_32_p border_radius_10 chart_box_bgi">
          <div class="chart_title l_30 lh_30 text_center"><span>防疫信息</span></div>
          <div class="info_box color_fff">
            <p class="mb_10 ml_30 mt_10">2024.2.5 -- 口啼疫 -- 已接种 </p>
            <p class="mb_10 ml_30 mt_10">2024.3.12 -- 高致病性禽流感 -- 已接种</p>
            <p class="mb_10 ml_30 mt_10">2023.11.21 -- 布病 -- 已接种</p>
          </div>
        </div>

        <!-- 治疗信息 -->
        <div class="w_full h_30_p border_radius_10 chart_box_bgi">
          <div class="chart_title l_30 lh_30 text_center"><span>治疗信息</span></div>
          <div class="info_box color_fff">
            <p class="mb_10 ml_30 mt_10">2023.10.2 -- 牛结核病 -- 注射药物名称 </p>
            <p class="mb_10 ml_30 mt_10">2024.3.12 -- 疯牛病 -- 注射药物名称</p>
            <p class="mb_10 ml_30 mt_10">2024.3.21 -- 口啼疫 -- 注射药物名称</p>
          </div>
        </div>
      </div> 
    </div>
  </div>
</template>

<script>
  import BigscreenHeader from '@/common/header/index.vue';
  import { getOxDetail } from '../../../../config/api';

  export default {
    components: {BigscreenHeader},
    data() {
      return {
        oxId: '',
        oxData: {},
        growIndex: 0,
        sessionOxImg: sessionStorage.getItem('oxImg'),
        chengZhangJiLu: [
          {
            name: '出生期',
            shenGao: '102cm',
            weight: '52.13kg',
            shiZiBu: '29cm',
            tiXieChang: '118cm',
            xiongWei: '39cm',
            fuWei: '31cm',
            date: '2021-04-03'
          },
          {
            name: '6月',
            shenGao: '119cm',
            weight: '60kg',
            shiZiBu: '32cm',
            tiXieChang: '120cm',
            xiongWei: '43cm',
            fuWei: '39cm',
            date: '2021-10-15'
          },
          {
            name: '1年',
            shenGao: '124cm',
            weight: '68kg',
            shiZiBu: '41cm',
            tiXieChang: '138cm',
            xiongWei: '51cm',
            fuWei: '41cm',
            date: '2022-03-10'
          },
          {
            name: '2年',
            shenGao: '143cm',
            weight: '74kg',
            shiZiBu: '50cm',
            tiXieChang: '148cm',
            xiongWei: '60cm',
            fuWei: '47cm',
            date: '2023-04-11'
          },
          {
            name: '3年',
            shenGao: '153cm',
            weight: '78kg',
            shiZiBu: '55cm',
            tiXieChang: '158cm',
            xiongWei: '63cm',
            fuWei: '57cm',
            date: '2024-01-04'
          },
        ]
      }
    },
    mounted() {
      // this.oxId = this.$route.params.val
      // this.getOxDetail(this.oxId)

    },
    methods: {
      // 获取 牛 详情
      async getOxDetail(id) {
        let params = { id: id }
        let res = await getOxDetail(params)

        // console.log('牛详情 : ', res.data);
        // this.oxData = res.data

        if (res.data.基本信息[0].data == 6547) {
          res.data.图片[1] = ''
          res.data.图片[0] = require('@/assets/images/WenDuSu-OxImg/img1.jpg')
        } else if (res.data.基本信息[0].data == 3654) {
          res.data.图片[1] = ''
          res.data.图片[0] = require('@/assets/images/WenDuSu-OxImg/img2.jpg')
        } else if (res.data.基本信息[0].data == 2365) {
          res.data.图片[1] = ''
          res.data.图片[0] = require('@/assets/images/WenDuSu-OxImg/img3.jpg')
        } else if (res.data.基本信息[0].data == 1236) {
          res.data.图片[1] = ''
          res.data.图片[0] = require('@/assets/images/WenDuSu-OxImg/img5.jpg')
        } else if (res.data.基本信息[0].data == '000001') {
          res.data.图片[1] = ''
          res.data.图片[0] = require('@/assets/images/WenDuSu-OxImg/img4.jpg')
        } else if (res.data.基本信息[0].data == '002') {
          res.data.图片[1] = ''
          res.data.图片[0] = require('@/assets/images/WenDuSu-OxImg/img6.jpg')
        }

        this.oxData = res.data
      }, 

      // 跳转到 menu 页面
      goToMenuPage() {
        this.$router.push({
          path: "/bigscreen/menuPage"
        })
      },

      // 跳转到育种员页面
      goToYuZhongYuanPage() {
        this.$router.push({
          path: "/bigscreen/yuZhongJiLu"
        })
      },

      // 监听 点击 成长记录 tabName 切换成长记录
      changeGrowIndex(index) {
        this.growIndex = index
      },

      // 鼠标滚轮控制 成长记录TabName 横向滚动
      wheelScroll(e) {
        let box = this.$refs.tabName
        e.preventDefault()
        box.scrollLeft += e.deltaY
      }
    }
  }
</script>

<style scoped>
  @import url('../../../../assets/css/bigscreen.less');
</style>
  
</style>
<style scoped lang="less">
  .activeColor { color: #2366fc !important; }
  .left_box { 
    height: 33% !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }
  .right_box { 
    height: 33% !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  .info_item {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    // color: rgb(13, 246, 94);

    div:nth-child(1) { width: 45%; }
    div:nth-child(2) { width: 55%; }
  }

  .swiper { 
    width: 100%;
    height: 91% !important;
  }

  .yu_zhong_item {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 8px;
    box-sizing: border-box;

    .img_box {
      img { border-radius: 10px; }
    }
  }

  @media screen and (min-width: 1200px) and (max-width: 1399px) {
  }
  @media screen and (min-width: 1400px) and (max-width: 1699px) {
  }
</style>

<style>
.el-carousel__container { height: 100% !important; }
</style>